<script setup>
	import myEarch from './components/echarts.vue'
	import { onLoad,onShow ,onShareAppMessage} from '@dcloudio/uni-app'
	import { ref , computed} from 'vue'
	import { store } from '@/uni_modules/uni-id-pages/common/store.js'
	
	const info = computed(() => store.userInfo)
	const bannerList = ref([])
	const db = uniCloud.database()
	const navList = [{
		name:"娱乐",
		image:'../../static/yl.png'
	},{
		name:"星期天",
		image:'../../static/xqt.png'
	},{
		name:"图片",
		image:'../../static/image.png'
	},{
		name:"赛事表",
		image:'../../static/yfw.png'
	}]
	
	onLoad(() => {
		getBannerList()
	})
	
	onShareAppMessage(() => {})
	
	const getBannerList = async () => {
		const res = await db.collection('dynamic_list').orderBy('createTime desc').get()
		const { data } = res.result
		if(!data.length) return
		const newArr = data.filter(item => item.isShowIndexBanner && item.image.length)
		bannerList.value = newArr.map(item => item.image[0])
	}
	
	const changeNav = (index) => {
		if(index !== 1){
			if(!info.value?._id) return uni.navigateTo({url:'/uni_modules/uni-id-pages/pages/login/login-withoutpwd'})
			const urls = [
				'/pages/index/leisure',
				'',
				'/pages/user/image',
				'/pages/index/webview'
			]
			uni.navigateTo({url:urls[index]})
		}else {
			uni.switchTab({url:'/pages/photo/index'})
		}
		
	}
	
</script>

<template>
	<view class="page-content">
		<u-swiper :list="bannerList" height="400rpx" indicator :displayMultipleItems="1" indicatorMode="dot"></u-swiper>
		<view class="nav-list flex">
			<view class="item flex" v-for="(item,index) in navList" :key="index" @click="changeNav(index)">
				<image class="image" :src="item.image" mode="widthFix"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
	<my-earch></my-earch>
</template>

<style lang="scss" scoped>
	.nav-list{
		justify-content: space-between;
		margin: 40rpx 0 20rpx;
		.item{
			margin-top: 20rpx;
			flex-direction: column;
			font-size: 34rpx;
		}
		image{
			height: 120rpx;
			width: 120rpx;
			border-radius: 50%;
			margin-bottom: 10rpx;
		}
	}
</style>